<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Qweas Bookstore - Login</title>
    <link href="css/ui.css" rel="stylesheet"/>
    <link href="css/framework.css" rel="stylesheet"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/login.css" rel="stylesheet"/>
    <link href="css/animate.css" rel="stylesheet"/>
    
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/bootstrap-notify.min.js"></script>
    <script type="text/javascript" src="js/utils/notify.js"></script>
</head>
<body>
<div id="content" class="text-center">
    <!-- CONTENTS -->
    <form id="frmLogin" class="form-login" action="login" method="post">
        <img class="mb-4" src="images/logo2.png" />
        <h1 class="h3 mb-3 font-weight-normal cursor-default">Please sign in</h1>
        <label for="phone" class="sr-only">Phone Number</label>
        <input type="text" id="phone" class="form-control" placeholder="Phone number"  name="phone" required autofocus/>
        <label for="password" class="sr-only">Password</label>
        <input type="password" id="password" class="form-control" placeholder="Password" name="password" required/>
        <div class="checkbox mb-3">
            <label>
                <a href="#" id="toggle_signup">Don't have an account?</a>
                <script>
                    $('#toggle_signup').click(function(){
                        $('#frmLogin').addClass('hidden');
                        $('#frmRegister').removeClass('hidden');
                    });
                </script>
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="btnLogin">Sign in</button>
    </form>
    <form id="frmRegister" class="hidden" action="registerServlet" method="post">
        <img class="mb-4" src="images/logo2.png" />
        <h1 class="h3 mb-3 font-weight-normal cursor-default"></h1>
        <div class="form-group">
            <input type="text" id="username" class="form-control" placeholder="Username" required autofocus/>
        </div>
        <div class="form-group">
            <input type="text" id="realName" class="form-control" placeholder="Your real name" required/>
        </div>
        <div class="form-group">
            <input type="text" id="IDcard" class="form-control" placeholder="Citizen ID Number (18 digits)" required/>
        </div>
        <div class="form-group">
            <input type="text" id="phone2" class="form-control" placeholder="Phone number" required/>
        </div>
        <div class="form-group">
            <input type="password" id="password2" class="form-control" placeholder="Password" required/>
        </div>
        <div class="form-group">
            <input type="password" id="password_confirm" class="form-control" placeholder="Repeat the password" required/>
        </div>
        <div class="form-group">
            <input type="email" id="email" class="form-control" placeholder="Email" required/>
        </div>
        <div class="input-group">
            <input type="text" id="vc" class="form-control"  placeholder="Verification code" required/>
            <div class="input-group-btn">
                <button id="btnRequestVC" type="button" class="btn btn-default">Send Code</button>
            </div>
        </div>
        <hr />
        <div class="form-group">
            I am ...
            <label class="radio-inline"><input type="radio" name="gender" value="1" required>Male</label>&nbsp;&nbsp;
            <label class="radio-inline"><input type="radio" name="gender" value="0" required>Female</label>
        </div>
        <div class="checkbox mb-3">
            <label>
                <a href="#" id="toggle_login">Already have an account?</a>
                <script>
                    $('#toggle_login').click(function(){
                        $('#frmLogin').removeClass('hidden');
                        $('#frmRegister').addClass('hidden');
                    });
                </script>
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
    </form>
    <script type="text/javascript">
            $('#btnLogin').click(function () { // catch the form's submit event
                $.ajax({
                    data: $("#frmLogin").serialize(),
                    type: $(this).attr('method'),
                    url: "checkUser",
                    success: function(response) { // on success..
                        console.log(response);
                        if(response === "true"){
                            $("#frmLogin").submit();
                        }else if(response === "false") {
                            PushNotification(ERROR, "username or password error");
                        }
                    },
                    error: function (xhr, desc, err) {
                    	PushNotification(ERROR, "Service not available at this moment.");
                    }
                });
                return false; // cancel original event to prevent form submitting
            });

            $('#frmRegister').submit(function (){
                if($('#password2').val() != $('#password_confirm').val()) {
                    PushNotification(ERROR, 'Password mismatch!');
                    return false;
                }
                $.ajax({
                    data: { // unfortunately we need to form the data manually due to duplication of 'phone' and 'password' fields
                        username: $('#username').val(),
                        realName: $('#realName').val(),
                        gender: parseInt($("input[name='gender']:checked").val()),
                        IDcard: $('#IDcard').val(),
                        phone: $('#phone2').val(),
                        password: $('#password2').val(),
                        emailCheck: $('#vc').val()
                    },
                    type: $(this).attr('method'),
                    url: $(this).attr('action'),
                    success: function(response) {
                        console.log(response);
                        if(response === "success") {
                        	$('#phone').val($('#phone2').val());
                            $('#toggle_login').click(); // Switch to login form
                            PushNotification(SUCCESS, 'Registration success! Please log in now.');
                        } else
                            PushNotification(ERROR, "Registration failed, please check your information and try again later.")
                    },
                    error: function (xhr, desc, err) {
                        PushNotification(ERROR, "Service not available at this moment.");
                    }
                });
                return false;
            });

            $('#btnRequestVC').click(function (){
                if($(this).hasClass('disabled'))
                    return;
                if(document.getElementById('email').checkValidity()) {
                    $.post("SendEmailServlet", { email: $('#email').val() }, function(){
                        $('#btnRequestVC').addClass('disabled');
                        startCountDown();
                    });
                } else {
                    $('#email').focus();
                    PushNotification(ERROR, 'Please enter a valid email first!');
                }
            });

            function startCountDown() {
                var countDown = 60;
                $('#btnRequestVC').text('60s');
                $('#vc').attr("placeholder", "Please check your email inbox");
                var counter = setInterval(function(){
                    countDown = countDown - 1;
                    if(countDown <= 0) {
                        clearInterval(counter);
                        $('#btnRequestVC').removeClass('disabled');
                        $('#btnRequestVC').text('Send Again');
                        $('#vc').attr("placeholder", "Verification code");
                        return;
                    }
                    $('#btnRequestVC').text(countDown + 's');
                }, 1000);
            }
    </script>
    <div id="footer-transparent" align="center" >
        <p style="font-size: 13px; color: gray;">
            © 2018 Qweas Bookstore, Zhang Wenqiang, Wu Jiatian, Ethan Phung, Andrew Lu and Eric Shuai. All rights reserved.</p>
    </div>
</div>
</body>
</html>